<template>
	<scroll-view scroll-y="true" class="tuik-box">
	  <view class="list" v-if="type === 1">
      <view class="title">选择取消本次订单原因</view>
      <navigator hover-class="none" :url="'/pages/index/order?id='+store_id+'&tuik=1'+'&order='+order_id" class="dd">我要更换寄存点/寄存时间</navigator>
      <navigator hover-class="none" :url="'/pages/index/order?id='+store_id+'&tuik=1'+'&order='+order_id" class="dd">我想变更寄存日期/寄存点</navigator>
	    <view class="dd" v-for="(item, index) in yuanyList.list" :key="index" @click="getReson(item)" :class="{on:refund_reason === item}">{{item}}</view>
	  </view>
    <view class="mx">
      <view class="title">取消订单明细</view>
      <view class="item">
        <view class="lab">订单金额</view>
        <view class="text">￥6.00</view>
      </view>
      <view class="item">
        <view class="lab">使用优惠券</view>
        <view class="text">￥6.00</view>
      </view>
      <view class="item">
        <view class="lab">实际支付</view>
        <view class="text">￥6.00</view>
      </view>
      <view class="item">
        <view class="lab">手续费</view>
        <view class="text">￥6.00</view>
      </view>
    </view>
	</scroll-view>
</template>

<script>
	export default {
    props:{
      price:{},
      yuanyList:{},
      store_id:'',
      order_id:'',
      type:1
    },
		data() {
			return {
        refund_reason:''
			}
		},
		created() {
			
		},
		methods: {
			getReson(e){
        this.refund_reason = e;
        this.$emit('getReson',e)
      }
		}
	}
</script>

<style lang="less">
	.tuik-box{
    max-height: calc(100vh - 100rpx);
    .mx{
      margin-top: -10rpx;
      .item{
        display: flex; align-items: center; justify-content: space-between; height: 110rpx; border-bottom: 1px solid #ededed;
        .lab{color: #666; font-size: 26rpx;}
        .text{font-size: 32rpx; color: #333;}
      }
    }
    .title{
      font-size: 32rpx; font-weight: bold; position: relative; margin-bottom: 30rpx; display: flex; align-items: center; margin-top: 30rpx;
      &::before{content: ''; display: block; width: 8rpx; height: 26rpx; background-color: #FF6A00; border-radius: 4rpx; margin-right: 10rpx;}
    }
    .dd{font-size: 28rpx; color: #666; height: 80rpx; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: space-between; padding:  0 30rpx; border-radius: 40rpx; border: 1px solid #ededed; display: flex; align-items: center; margin-bottom: 20rpx;}
    // .dd::after{content: ''; display: block; width: 26rpx; height: 26rpx; margin-top: 2px; border-radius: 50%; border: 1px solid #ccc; margin-right: 10rpx; box-sizing: border-box;}
    .on.dd{border-color:#FF6A00; color:#FF6A00;}
    
    
    .p1{font-size: 30rpx; margin-bottom: 20rpx;}
    .p2{font-size: 28rpx; color: #777; margin-bottom: 20rpx;}
    .money{font-size: 44rpx; color: red; margin-bottom: 10rpx;}
    
    .p4{font-size: 30rpx;  padding: 16rpx 0;}
    .p5{color: #FF6A00;}
    .p6{padding-top: 16rpx; border-top: 1px solid #ddd; color: #333; font-weight: bold;}
    
    .red{color: #FF6A00;}
    .btn10{background-color: #fff !important; border: 1px solid #ddd; color: #333;}
    .btns{display: flex; align-items: center; justify-content: center;}
  }
</style>
